<template>
	<view class="tabbar">
		<view class="tab" v-for="(item,index) in tabbarList" :key="index" @tap="navGoTo(item.pagePath)">
			<image v-if='item.pagePath===cureentPage' :src="item.selectedIconPath" mode=""></image>
            <image v-else :src="item.iconPath" mode=""></image>
			<view class="text">
				{{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
export default{
	props:{
		 cureentPage:{
			 type:String,
			 default:'index'
		 }
	},
	  data(){
		  return{
			  	tabbarList: [{
			  			"pagePath": "index",
			  			"text": "首页",
			  			"iconPath": "/static/tabber/首页.png",
			  			"selectedIconPath": "/static/tabber/首页-首页.png"
			  		},
			  		{
			  			"pagePath": "list",
			  			"text": "分类",
			  			"iconPath": "/static/tabber/分类 (1).png",
			  			"selectedIconPath": "/static/tabber/分类.png"
			  		},
			  		{
			  			"pagePath": "shop",
			  			"text": "购物车",
			  			"iconPath": "/static/tabber/_购物车 (1).png",
			  			"selectedIconPath": "/static/tabber/3.1购物车-选中.png"
			  		},
			  		{
			  			"pagePath": "my",
			  			"text": "我的",
			  			"iconPath": "/static/tabber/我的.png",
			  			"selectedIconPath": "/static/tabber/我的选中.png"
			  		}
			  	]
		  }
	  },
	  methods:{
		  navGoTo(e){
			  let url ='/pages/'+e+'/'+e+'';
			  if(e==='shop' || e==='my'){
				 this.navigateTo({
					 url:url,
					 
				 })
			  }else{
				  uni.redirectTo({
				     url:url
				  })
			  }
		  }
	  }
	}
</script>

<style scoped>
	.tabbar{
		border-top:2rpx solid #acacac;
		background-color: white;
		z-index: 9999;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.tap{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	image{
		width: 40rpx;
		height: 40rpx;
	}
	.text{
		font-size: 24rpx;
	}
</style>